<template>
  <section class="hot">
    <h2 class="hot-title">
      <span class="hot-title__item">热歌风向标</span>
    </h2>

    <div class="hot-content">
      <van-swipe class="hot-content__swiper"
        :loop="false"
        :width="bodyWidth * 0.9"
        :show-indicators="false"
        :stop-propagation="false">
        <van-swipe-item class="hot-content__item" v-for="item of toplist" :key="item.id">
          <rank-list-card
            :info="item"
            :coverImgUrl="item.coverImgUrl"
            :tracks.sync="item.tracks"/>
        </van-swipe-item>
      </van-swipe>
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import RankListCard from '@/components/RankListCard'
import storage from '@/utils/storage'

export default {
  name: 'home-hot-song',
  components: {
    RankListCard
  },
  data () {
    return {
      // loading: true,
      // hot: ['华语', '流行', '电子', '摇滚', '古典'],
      toplist: [
        { id: 3779629, name: '', coverImgUrl: '', tracks: [] },
        { id: 2884035, name: '', coverImgUrl: '', tracks: [] },
        { id: 3778678, name: '', coverImgUrl: '', tracks: [] },
        { id: 19723756, name: '', coverImgUrl: '', tracks: [] }
      ]
    }
  },
  computed: {
    ...mapGetters(['bodyWidth']),
    ids () {
      return this.toplist.map(v => v.id)
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      const { data } = storage.getItem('toplist')
      // console.log('toplist.data: ', data.filter(v => v.tracks.length > 0))
      data.forEach(v => {
        if (this.ids.includes(v.id)) {
          const item = this.toplist.find(iv => iv.id === v.id)
          item.name = v.name
          item.coverImgUrl = v.coverImgUrl
          item.tracks = [].concat(v.tracks)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.hot {
  height: 3rem;
  &-title {
    height: .5rem;
    line-height: .5rem;
    font-size: $font--medium;
    font-weight: 600;
    &__item {
      margin: 0 .1rem;
    }
  }
  &-content {
    box-sizing: border-box;
    height: 2.5rem;
    &__swiper {
      height: 100%;
    }
    &__item {
      box-sizing: border-box;
      padding: .1rem;
    }
  }
}
</style>
